var Index = function() {

    // Glass library location.
    var glassPath = 'img/glass/',
        modelPath = 'img/model/',
        move = false;
    
    // Load glass list.
    $.getJSON('json/glass.json' ,function(result) {
        $.each(result, function(i, field) {
            var _html = '<li><a href="javascript:void(0);" title="' + field.name + '" data-array="' + i + '"><div class="thumb" style="background-image: url(\'' + glassPath + field.img + '\');"></div><div class="info"><p class="t">' + field.name + '</p></div></a></li>';
            $('#glassList').append(_html);
        });
        // Set glass.
        $('#glassList li').bind('click', function(event) {
            if($('#editZone').css('background-image') == 'none') {
                alert('请先上传图片或选择模特!');
                $('.tab li').eq(1).trigger('click');
            }else {
                var arrID = $(this).children('a').attr('data-array');
                setGlass(queryGlass(arrID).img);
                if(!($('.tab li').eq(2).hasClass('curr'))) {
                    $('.tab li').eq(2).trigger('click');
                }
                $('.buy-btn').show().attr('href', queryGlass(arrID).url);
            }
        });
        // Query glass.
        function queryGlass(_arrID) {
            return result[_arrID];
        }
    });
    
    // Load model list.
    $.getJSON('json/model.json', function(result) {
        $.each(result, function(i, field) {
            var _html = '<li><a href="javascript:void(0);" title="' + field.name + '" data-array="' + i + '" style="background-image:url(' + modelPath + field.img + ');"></a></li>';
            $('#modelList').append(_html);
        });
        // Set model image.
        $('#modelList li').bind('click', function(event) {
            var arrID = $(this).children('a').attr('data-array');
            setModelImg(modelPath + queryModel(arrID).img);
        });
        // Query model.
        function queryModel(_arrID) {
            return result[_arrID];
        }
    });
    
    // Tab switch.
    $('.tab li').on('click', function(event) {
        var _this = $(this),
            _target = $('.' + _this.attr('data-target'));
        _this.parent().find('li').removeClass('curr');
        _this.addClass('curr');
        $('.wrap-box').hide();
        _target.fadeIn(300);
    });
    
    // Popup file upload window.
    $('#uploadPicBtn').on('click', function(event) {
        $('#uploadElement').trigger('click');
        if($('#tmpPIC').attr('src') != null) setModelImg($('#tmpPIC').attr('src'));
    });
    
    // Model chioce.
    $('#choiceModelBtn').on('click', function(event) {
        $('.tab li').eq(1).trigger('click');
    });
    
    // Bind background element.
    $('#tmpPIC').bind('load', function(event) {
        var userImg = $(this).attr('src');
        setModelImg(userImg);
    });
    
    // Move glass.
    $('#editZone').mousemove(function(e){
        if(move) {
            var _self = $(this).children('#glassElement'),
                _x = e.pageX,
                _y = e.pageY;
            $(this).on('mousemove', dragElement(_self, _x, _y));
        }
    }).mousedown(function() {
        move = true;
    }).mouseup(function() {
        move = false;
    });
    function dragElement(_obj, _x, _y) {
        var _parent = _obj.parent(),
            top = _parent.offset().top,
            left = _parent.offset().left,
            x = (_x - left) - (_obj.width() / 2),
            y = (_y - top) - (_obj.height() / 2);
        _obj.css({
            'left': x + 'px',
            'top': y + 'px'
        });
        return false;
    }
    
    // Zoom & zoom out.
    $('#zoom').on('click', function(event) {
        zoomElement($('#glassElement'), 'zoom');
    });
    $('#zoomOut').on('click', function(event) {
        zoomElement($('#glassElement'), 'zoomout');
    });
    function zoomElement(_obj, _action) {
        var _zoom = parseFloat(_obj.attr('data-zoom'));
        if(_action == 'zoom') {
            _zoom = _zoom + 0.05;
            if(_zoom > 2) _zoom = 2;
        }else if(_action = 'zoomout') {
            _zoom = _zoom - 0.05;
            if(_zoom < 0.5) _zoom = 0.5;
        }
        _obj.attr('data-zoom', _zoom);
        _obj.css('transform', 'scale(' + _zoom + ')');
    }
    
    // Set model image.
    function setModelImg(_src) {
        $('#editZone').css('background-image', 'url("' + _src + '")');
        $('.tab li').eq(2).trigger('click');
    }
    
    // Set glass image.
    function setGlass(_img) {
        $('#glassElement').attr('src', glassPath + _img);
    }
    
}();

// Save upload image to temp file.
window.onload = function () {
    new uploadPreview({ UpBtn: "uploadElement", ImgShow: "tmpPIC" });
}